<template>
  <div class="refine_lawlist">
    <h2 class="titleblue">典型案例</h2>

    <div class="contant">
      <div class="clear">
        <div class="create" @click="addLaw">上传案例</div>
        <el-input prefix-icon="el-icon-search" clearable @clear="search" placeholder="搜索典型案例" v-model="keyword"
                  class="plansearch">
          <span slot="append" @click="search">搜索</span>
        </el-input>
        <div class="fr margin10">
          <label>典型案例分类</label>
          <el-select clearable v-model="lawType" class="select-width-200" @change="search">
            <el-option
              v-for="(item,index) in lawOptions"
              :key="index"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </div>
      </div>
      <data-table :page='currentPage' style="width: 100%" :head="thead" :data="tableData" :operate="ooptions" @callback="manipulate"
                  :actions="['edit','view','del']"></data-table>

      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page.sync="currentPage" layout="total,prev, pager, next, jumper"
                     :total="totalPage" background>
      </el-pagination>
    </div>

    <el-dialog title="" :visible.sync="editdialog" width="80%" append-to-body @close="close">
        <span>
          <router-view :lawData='lawData' :lawTitle="lawTitle" @update="update" @cl="back"></router-view>
        </span>
    </el-dialog>
  </div>
</template>

<script>
  import DataTable from '@/components/common/DataTable.vue'
  import dictService from '@/services/DictionaryService.js'
  import * as lawsService from '@/services/LawsService.js'
  import moment from 'moment'

  export default {
    components: {
      'data-table': DataTable
    },
    data () {
      return {
        thead: [
          {name: '标题', prop: 'title'},
          {name: '典型案例分类', prop: 'lawType'},
          {name: '发布时间', prop: 'publishTime', width: '200'}
        ],
        currentPage: 1,
        tableData: [],
        ooptions: [{name: '编辑', prop: 'edit'}, {name: '查看', prop: 'view'}, {name: '删除', prop: 'del'}],
        adddialog: false,
        editdialog: false,
        member: '',
        page: '1',
        totalPage: 10,
        lawTitle: '',
        lawType: '',
        lawOptions: [],
        keyword: '',
        lawData: {}
      }
    },
    mounted () {
      this.getSelect()
      this.getData(0)
    },
    methods: {
      back () {
        this.editdialog = false
        this.close()
        this.getData(0)
      },
      getSelect () {
        dictService.find('DXAL').then(res => {
          this.lawOptions = res.map(item => { // {name: item.name, value: item.id}
            return item
          })
        })
      },
      handleSizeChange (val) {
        this.reGetData(val - 1)
      },
      handleCurrentChange (val) {
        this.reGetData(val - 1)
      },
      manipulate (param) {
        if (param.action == 'edit') {
          // this.editdialog = true
          // this.member = item
          // this.lawTitle = 'editLaw'
          this.lawData = param.data
          this.$router.push('/law-case/edit')
          this.editdialog = true
          this.lawTitle = 'editLaw'
        }
        if (param.action == 'del') {
          lawsService.deleteById(param.data.id).then(res => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getData(0)
          })
        }
        if (param.action == 'view') {
          // this.adddialog = true;
          // this.member = item
          window.open(param.data.url)
        }
      },
      close () {
        this.editdialog = false
        this.$router.push('/law-case')
      },
      reGetData: function (val) {
        this.$axios.get(this.$config['law'], {
          params: {
            skey: localStorage.getItem('auth'),
            counts: '10',
            page: val,
            code: 'dxal',
            keywords: this.keyword,
            type: this.lawType
          }
        }).then((res) => {
          var data = res.data.content
          this.tableData = data.ships
          this.totalPage = data.shipSize
        })
      },
      update () {
        this.reGetData(this.currentPage)
      },
      addLaw () {
        this.editdialog = true
        this.lawTitle = 'addLaw'
        this.member = ''
        this.$router.push('/law-case/edit')
      },
      getData (page, query) {
        var str = 'code==DXAL' + (query ? `;${query}` : '')
        lawsService.search(page, str).then(res => {
          this.totalPage = parseInt(res.headers['x-total-count'], 10)
          this.tableData = res.data.map(item => {
            item.publishTime = item.publishTime ? moment(item.publishTime).format('YYYY-MM-DD HH:mm:ss') : ''
            item.lawType = item.dictionary ? item.dictionary.name : item.type
            return item
          })
        })
      },
      handleQuery () {
        var query = ''
        if (this.lawType) {
          query += 'dictionary.id==' + this.lawType
        }
        if (this.keyword) {
          if (query.length) {
            query += ';'
          }
          query += 'title=like=' + this.keyword
        }
        return query
      },
      search () {
        this.currentPage = 1
        let query = this.handleQuery()
        this.getData(0, query)
      }
    }
  }
</script>

<style scoped lang="scss">
  .refine_lawlist {
    width: 100%;
    display: inline-block;

    .el-table tr:nth-child(2n) {
      background: #FAFAFA
    }

    .table {
      margin-top: 20px;
      display: inline-block
    }

    .margin10 {
      margin-right: 10px;
    }
  }
</style>
